<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/Rolemanagement.css" />
  </head>
  <body>
    <div class="title">
      <span>角色管理</span>
    </div>
    <div class="functionButton">
      <div class="tj bt">添加</div>
      <div class="xg bt">修改</div>
      <div class="sc bt">删除</div>
      <div class="szqx bt">设置权限</div>
    </div>
        
    <!-- 表格 -->
    <div class="content">
      <div>
        <table id="tfhover" class="tftable" border="1">
          <thead>
            <tr>
              <th class="option">
              </th>
              <th class="sj">角色名称</th>
              <th class="sj">状态</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <div class="bottomNavigation">
        <ul class="pagination">
          <button class="prev">上一页</button>
          <button class="next">下一页</button>
        </ul>
        
      </div>
    </div>
    <!-- 添加角色 -->
    <div class="addTo-box" id="addTo-box1">
      <div class="addTo-box-czd">
        <div class="czd" id="czd1">
          <span>增加角色</span>
          <span><img src="../images/u11107.svg" alt=""></span>
        </div>
        <div class="czd2">
          <p>角色名称:</p>
          <input type="text" id="tjmc1" >
        </div>
        <div class="czd3">
          <span>角色状态:</span>
          <input type="checkbox" name="" id="zt11" checked>
          <span>有效</span>
          <input type="checkbox" name="" id="zt21">
          <span>无效</span>
        </div>
        <div class="czd4">
          <button class="qx" id="qx1">取消</button>
          <button class="bc" id="bc1">保存</button>
        </div>
      </div>
    </div>
    <!-- 修改 -->
    <div class="addTo-box" id="addTo-box2">
      <div class="addTo-box-czd">
        <div class="czd" id="czd2">
          <span>修改</span>
          <span><img src="../images/u11107.svg" alt=""></span>
        </div>
        <div class="czd2">
          <p>角色名称:</p>
          <input type="text" id="mc1" >
        </div>
        <div class="czd3" id="ztt">
          <span>角色状态:</span>
          <input type="checkbox" name="" checked>
          <span>有效</span>
          <input type="checkbox" name="" >
          <span>无效</span>
        </div>
        <div class="czd4">
          <button class="qx" id="qx2">取消</button>
          <button class="bc" id="bc2">保存</button>
        </div>
      </div>
    </div>
    <!-- 权限设置 -->
    <div class="addTo-box" id="qxx" >
      <div class="quiz">
        <div class="quiz-top">
          <span>权限设置</span>
          <span><img src="../images/u11107.svg" alt="" class="imga"></span>
        </div>
        <div class="quiz-on">
          <div>
            <div><img class="iimm" src="../images/u10941.png" alt=""><span>个人待处理</span></div>
            <ul class="lrr">
              <li>待审批记录</li>
              <li>已审批记录查询</li>
              <li>被驳回记录</li>
              <li>已上报事件查询</li>
            </ul>
          </div>
          <div>
            <div><img class="iimm" src="../images/u10941.png" alt=""><span>不良事件上报</span></div>
          </div>
          <div>
            <div><img class="iimm" src="../images/u10941.png" alt=""><span>查询已报事件</span></div>
          </div>
          <div>
            <div><img class="iimm" src="../images/u10941.png" alt=""><span>事件综合分析</span></div>
          </div>
          <div>
            <div><img class="iimm" src="../images/u10941.png" alt=""><span>系统管理</span></div>
          </div>
        </div>
        <div class="czd4 czd5">
          <button class="qx qx2 qx3" >取消</button>
          <button class="bc bc2">保存</button>
        </div>
      </div>
    </div>
    
  </body>
  <script src="../js/Rolemanagement.js"></script>
</html>
